<template>
	<div class="local-grid">
		<Action-panel v-if="hasAction"
		              :selectStatus="selectStatus"
		              :modalTransfer="actionModalTransfer"
		              :model="tableModel.actions"></Action-panel>
		<div class="table-wrapper table-fiexd-action">
			<Spin size="large"
			      fix
			      v-show="loading"></Spin>
			<div class="table-data-wrapper">
				<table ref="data_table"
				       class="table"
				       :class="tableClass">
					<thead>
						<slot name="thead">
							<tr>
								<th class="check-cell"
								    @click="checkAllRow($event)"
								    v-if="hasCheck">
									<Checkbox v-model="checkAll"></Checkbox>
								</th>
								<th v-for="col in orderFields"
								    :key="col.code"
								    v-if="col.listpos!==false">
									{{col.name}}
								</th>
							</tr>
						</slot>
					</thead>
					<tbody>
						<slot name="tbody">
							<tr v-if="!listData || !listData.length">
								<td colspan="999">
									暂无数据
								</td>
							</tr>
							<tr v-else
							    :style="rowsStyle[index]"
							    v-for="(row,index) in listData"
							    :key="row.id"
							    :class="{[ativeClass]:checkList[index]}"
							    @click="checkTableRow(index)">
								<td class="check-cell"
								    v-if="hasCheck"
								    @click="checkRow($event,index)">
									<Checkbox v-model="checkList[index]"></Checkbox>
								</td>
								<td v-for="col in orderFields"
								    :key="col.code"
								    v-if="col.listpos!==false">
									<div v-if="!extRender[col.code]"
									     class="field"
									     :class="fieldClass(row[col.code],col.code)"
									     v-html="renderData(row[col.code],col.code,row)"></div>
									<component @trigger="fieldTrigger(col,index,$event) "
									           v-else-if="extRender[col.code].component"
									           :is="extRender[col.code].component"
									           :data="row[col.code]"
									           :row="row"
									           :option="extRender[col.code]"
									           :index="index"
									           :field="col"
									           :model="col"></component>
								</td>
							</tr>
						</slot>
					</tbody>
					<tfoot v-if="false">
						<slot name="tfoot">
							<th></th>
						</slot>
					</tfoot>
				</table>
			</div>
			<div class="table-action-wrapper">
				<table ref="action_table"
				       class="table table-action"
				       v-show="listData && listData.length"
				       v-if="listData && listData.length && hasTableAction"
				       :class="tableClass">
					<thead>
						<slot name="thead">
							<tr>
								<th :colspan="ActionSpan">操作</th>
							</tr>
						</slot>
					</thead>
					<tbody>
						<tr v-for="(row,index) in listData"
						    :style="rowsStyle[index]"
						    :key="row.id"
						    :class="{[ativeClass]:checkList[index]}"
						    @click="checkTableRow(index)">
							<td class="action-cell"
							    v-if="tableModel.actions && tableModel.actions.length">
								<div class="text-right">
									<InlineAction v-show="inlineActionStatus[action.code]?inlineActionStatus[action.code].show:true"
									              v-for="action in slaveActions"
									              :model="action"
									              :key="action.code"
									              :index="index"
									              :row="row"></InlineAction>
								</div>
							</td>
							<td v-if="hasSort"
							    class="serial-box">
								<Button size="small"
								        type="ghost"
								        icon="arrow-up-b"
								        @click="rowUp(index)"></Button>
								<Button size="small"
								        type="ghost"
								        icon="arrow-down-b"
								        @click="rowDown(index)"></Button>
							</td>
							<td v-if="hasDelete"
							    class="remove-box">
								<Button class="text-danger row-delete"
								        icon="close"
								        size="small"
								        type="text"
								        @click="rowDelete(index)"></Button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</template>

<script>
import moduleStore from './store';
import Action from 'mixins/action';
import $ from '@/common';
import { actionsParser } from '@/common/parser';

import baseGrid from '../gridTableSample';
export default {
	name: 'localGrid',
	moduleStore,
	mixins: [Action],
	extends: baseGrid,
	data() {
		return {
			isSlave: true,
			selectStatus: false,
		};
	},
	props: {
		hasAction: {
			default: true,
		},
		viewMode: {
			default: false,
		},
		data: {},
		mainForm: {},
		actionModalTransfer: {},
	},
	watch: {
		data: {
			handler() {
				this.$nextTick(() => {
					this.setData($.copyJson(this.data));
					this.$set(this.moduleState, 'listData', this.data);
				});
			},
		},
		checkList() {
			for (var i in this.checkList) {
				if (this.checkList[i]) {
					this.selectStatus = true;
					return;
				}
			}
			this.selectStatus = false;
		},
	},
	computed: {
		ActionSpan() {
			var col = 1;
			if (this.hasDelete) {
				col++;
			}
			if (this.hasSort) {
				col++;
			}
			return col;
		},
		slaveActions() {
			return this.tableModel.actions.filter(action => {
				return action.code !== 'delete';
			});
		},
		deleteAction() {
			var actionDef = {
				code: 'delete',
				type: 'delte',
				name: '删除',
				param: {
					local: true,
				},
			};
			if (this.tableModel.actions) {
				for (let action of this.tableModel.actions) {
					if (action.code === 'delete') {
						return $.setObj($.copy(action), actionDef);
					}
				}
			}
			return actionDef;
		},
		hasDelete() {
			for (let i in this.tableModel.actions) {
				var action = this.tableModel.actions[i];
				if (action.code === 'delete') {
					return action.locate !== 'none';
				}
			}
			return true;
		},
		hasSort() {
			for (let i in this.tableModel.actions) {
				var action = this.tableModel.actions[i];
				if (action.code === 'sort') {
					return action.locate !== 'none';
				}
			}
			return false;
		},
	},
	created() {
		//console.log(this.moduleState);
		this.setData($.copyJson(this.data));
		this.tableModel.actions = this.slaveActionsProcess(this.tableModel.actions);
	},
	methods: {
		//通知上级组件进行数据更新
		update() {
			var mainForm = this.$mainForm || this.mainForm;
			if (mainForm && mainForm.$parentAction && mainForm.$parentAction.updateData) {
				mainForm.$parentAction.updateData();
			} else if (this.$parentAction && this.$parentAction.updateData) {
				this.$parentAction.updateData();
			}
		},
		rowInput(index, { code, value }) {
			this.setRowField({
				index,
				code,
				value,
			});
		},
		getSelectedIds() {
			var list = [];
			this.checkList.forEach((item, i) => {
				if (item) {
					var row = this.listData[i];
					if (row) {
						list.push(row.id);
					}
				}
			});
			return list;
		},
		rowDelete(index) {
			if (
				(this.deleteAction.param === false || this.deleteAction.path) &&
				this.listData[index].id !== undefined
			) {
				this.actionTrigger({
					code: 'delete',
					row: this.listData[index],
					index: index,
					data: this.listData[index].id,
				}).then(() => {
					this.removeRow(index);
				});
			} else {
				this.removeRow(index);
			}
		},
		checkTableRow() {},
		slaveActionsProcess(data) {
			var actions = data ? $.copyJson(data) : [];
			actions = actionsParser(actions);
			var defActions = {
				add: {
					code: 'add',
					type: 'add',
					param: {
						local: true,
					},
				},
				edit: {
					code: 'edit',
					type: 'edit',
					name: '编辑',
					param: {
						local: true,
					},
				},
			};
			actions.forEach(action => {
				if (defActions[action.code]) {
					action = $.setObj(action, defActions[action.code]);
					defActions = false;
				}
				if (action.code === 'view') {
					action = $.setObj(action, {
						param: {
							local: true,
						},
					});
				}
			});
			for (let i in defActions) {
				if (defActions[i]) {
					actions.unshift(defActions[i]);
				}
			}
			return actionsParser(actions);
		},
	},
	components: {},
};
</script>

<style lang="less">
.local-grid {
	.table-wrapper .table-data-wrapper {
		overflow-y: auto;
	}
	.table {
		td.serial-box {
			text-align: right;
			padding: 0;
			width: 60px;
			white-space: nowrap;
			button.ivu-btn {
				margin: 0;
				height: auto;
				border-width: 0;
				border-radius: 0;
				padding: 8px;
			}
		}
		td.remove-box {
			padding: 0;
			button.ivu-btn {
				padding: 8px;
				margin: 0;
			}
		}
		td.action-cell {
			padding: 4px 8px;
		}
	}
}
</style>
